<template>
	<view>
		<view class="upload">
			<view class="uploadItem">
				<uni-file-picker :disabled="disabled" :readonly="readonly" :disable-preview="disablePreview"
					:del-icon="delIcon" :auto-upload="autoUpload" :file-mediatype="fileMediatype" :mode="mode"
					:limit="limit" :image-styles="imageStyles" :list-styles="listStyles" @select="select"
					@delete="pickerDelete">
				</uni-file-picker>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		props: {
			disabled: {
				// 组件禁用
				type: Boolean,
				default: false
			},
			readonly: {
				// 组件只读，不可选择，不显示进度，不显示删除按钮
				type: Boolean,
				default: false
			},
			disablePreview: {
				// 禁用图片预览，仅 mode:grid生效
				type: Boolean,
				default: false
			},
			delIcon: {
				// 是否显示删除按钮
				type: Boolean,
				default: true
			},
			autoUpload: {
				// 是否自动上传，值为false则只触发@select,可自行上传
				type: Boolean,
				default: true
			},
			fileMediatype: {
				// image/video/all 默认image,选择文件类型,all 只支持 H5 和微信小程序平台
				type: String,
				default: "image"
			},
			mode: {
				// list/grid  选择文件后的文件列表样式
				type: String,
				default: "grid"
			},
			limit: {
				type: [String, Number],
				default: 9
			},
		},
		data() {
			return {
				imageValue: [],
				imageStyles: {
					// mode:grid 时的样式
					"width": 110,
					"height": 110,
					"border": {
						"color": "#eee",
						"width": "1px",
						"style": 'solid',
						"radius": '5px'
					}
				},
				listStyles: {
					// mode:list 时的样式
					"borderStyle": {
						"color": "#eee", // 边框颜色
						"width": "1px", // 边框宽度
						"style": "solid", // 边框样式
						"radius": "5px" // 边框圆角，不支持百分比
					},
					"border": false, // 是否显示边框
					"dividline": true // 是否显示分隔线
				},
			}
		},
		watch: {
			imageValue: {
				handler(val) {
					this.$emit("uploaded", val)
				},
				deep: true
			},
		},
		methods: {
			// 获取上传状态
			select(e) {
				console.log('选择文件：', e);
				const tempFilePaths = e.tempFiles[0].path;
				this.$upload({
					data: {
						filePath: tempFilePaths
					}
				}).then((res) => {
					let obj = {
						payImg: res.file,
						tempFilePath: tempFilePaths,
					}
					this.imageValue.push(obj);
					console.log("imageValue:", this.imageValue);
				}).catch((error) => {
					console.log("上传error：", error);
				})
			},
			// 文件从列表移除时触发
			pickerDelete(e) {
				// console.log('文件从列表移除时触发：', e);
				this.imageValue.forEach((item, index) => {
					if (item.tempFilePath === e.tempFilePath) {
						this.imageValue.splice(index, 1);
					}
				})
			},
		},
	}
</script>

<style scoped lang="scss">
	.upload {
		height: auto;

		.uploadItem {
			height: 210rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			::v-deep .file-picker__box {
				background-color: #{$whiteColor};
			}
		}
	}
</style>